﻿<UserControl
    x:Class="Icinetic.FeedCategorySample.MenuControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Icinetic.FeedCategorySample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:commonbase="using:Icinetic.FeedCategorySample.Common.Base"
    xmlns:common="using:Icinetic.FeedCategorySample.Common"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <UserControl.Resources>

        <CollectionViewSource
                    x:Name="CategoryitemsViewSource"
                    Source="{Binding CategoryList}"
                    IsSourceGrouped="true"
                    ItemsPath="Articles"
                    />

        <ItemsPanelTemplate x:Key="articlesPanelLandscape">
            <VariableSizedWrapGrid VerticalAlignment="Center"
                                               MaximumRowsOrColumns="2"
                                               />
        </ItemsPanelTemplate>

        <ItemsPanelTemplate x:Key="articlesPanelPortrait">
            <VariableSizedWrapGrid VerticalAlignment="Center"
                                               MaximumRowsOrColumns="6"
                                               />
        </ItemsPanelTemplate>

        <ItemsPanelTemplate x:Key="articlesPanelMenuLandscape">
            <VariableSizedWrapGrid VerticalAlignment="Top" HorizontalAlignment="Left"
                                                                   ItemHeight="170"
                                                                   ItemWidth="170"
                                                                   MaximumRowsOrColumns="3" Margin="0,0,180,0"/>
        </ItemsPanelTemplate>

        <ItemsPanelTemplate x:Key="articlesPanelMenuPortrait">
            <VariableSizedWrapGrid VerticalAlignment="Top" HorizontalAlignment="Left"
                                                                   ItemHeight="170"
                                                                   ItemWidth="170"
                                                                   MaximumRowsOrColumns="5" Margin="0,0,180,0"/>
        </ItemsPanelTemplate>

    </UserControl.Resources>
    <Grid>
        <SemanticZoom x:Name="semanticZoomMenu" Style="{StaticResource AlignmentSemanticZoomStyle}"  ViewChangeStarted="SemanticZoom_ViewChangeStarted">
            <SemanticZoom.ZoomedOutView>
                <common:VariableGridView x:Name="itemGridCategoryViewMenu"
                                    AutomationProperties.AutomationId="ItemsGridView"
                                    AutomationProperties.Name="Items"
                                    VerticalAlignment="Stretch"
                                    HorizontalAlignment="Center"
                                    ItemsSource="{Binding ElementName=CategoryitemsViewSource, Path=View.CollectionGroups}"
                                    SelectionMode="None"
                                    IsSwipeEnabled="false"
                                    IsItemClickEnabled="True"
                                    Padding="120,137"
                                    Grid.Row="1"
                                    ItemsPanel="{StaticResource articlesPanelLandscape}">
                    <common:VariableGridView.ItemTemplate>
                        <DataTemplate>
                            <Grid DataContext="{Binding Group}" Background="{Binding Color}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="100" Width="200">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource MenuTitleStyle}" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </common:VariableGridView.ItemTemplate>
                </common:VariableGridView>
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>
                <common:VariableGridView 
                                    x:Name="itemGridView"
                                    VerticalAlignment="Stretch"
                                    HorizontalAlignment="Stretch"
                                    ItemsSource="{Binding Source={StaticResource CategoryitemsViewSource}}"
                                    SelectionMode="None"
                                    IsItemClickEnabled="True"
                                    ItemClick="ItemView_ItemClick"
                                    ItemTemplate="{StaticResource RssTemplate}"
                                    Grid.Row="1"
                                    Padding="120,0,0,0">
                    <common:VariableGridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,80,80,0"/>
                        </ItemsPanelTemplate>
                    </common:VariableGridView.ItemsPanel>
                    <common:VariableGridView.GroupStyle>
                        <GroupStyle Panel="{StaticResource articlesPanelMenuLandscape}">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource SubheaderTextStyle}" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </common:VariableGridView.GroupStyle>
                </common:VariableGridView>
            </SemanticZoom.ZoomedInView>
        </SemanticZoom>
        
        <SemanticZoom x:Name="semanticZoomMenuPortrait" Style="{StaticResource AlignmentSemanticZoomStyle}"  ViewChangeStarted="SemanticZoom_ViewChangeStarted" Visibility="Collapsed">
            <SemanticZoom.ZoomedOutView>
                <common:VariableGridView x:Name="itemGridCategoryViewMenuPortrait"
                                    AutomationProperties.AutomationId="ItemsGridView"
                                    AutomationProperties.Name="Items"
                                    VerticalAlignment="Stretch"
                                    HorizontalAlignment="Center"
                                    ItemsSource="{Binding ElementName=CategoryitemsViewSource, Path=View.CollectionGroups}"
                                    SelectionMode="None"
                                    IsSwipeEnabled="false"
                                    IsItemClickEnabled="True"
                                    Padding="100,137"
                                    Grid.Row="1"
                                    ItemsPanel="{StaticResource articlesPanelPortrait}">
                    <common:VariableGridView.ItemTemplate>
                        <DataTemplate>
                            <Grid DataContext="{Binding Group}" Background="{Binding Color}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="100" Width="200">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource MenuTitleStyle}" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </common:VariableGridView.ItemTemplate>
                </common:VariableGridView>
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>
                <common:VariableGridViewPortrait 
                                    x:Name="itemGridViewPortrait"
                                    VerticalAlignment="Stretch"
                                    HorizontalAlignment="Left"
                                    ItemsSource="{Binding Source={StaticResource CategoryitemsViewSource}}"
                                    SelectionMode="None"
                                    IsItemClickEnabled="True"
                                    ItemClick="ItemView_ItemClick"
                                    ItemTemplate="{StaticResource RssTemplate}"
                                    Grid.Row="1"
                                    Padding="100,0">
                    <common:VariableGridViewPortrait.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,80,80,0"/>
                        </ItemsPanelTemplate>
                    </common:VariableGridViewPortrait.ItemsPanel>
                    <common:VariableGridViewPortrait.GroupStyle>
                        <GroupStyle Panel="{StaticResource articlesPanelMenuPortrait}">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource SubheaderTextStyle}"/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </common:VariableGridViewPortrait.GroupStyle>
                </common:VariableGridViewPortrait>
            </SemanticZoom.ZoomedInView>
        </SemanticZoom>
        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled"/>
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoomMenu" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoomMenuPortrait" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Snapped">
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
